<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="styles/base.css">
  <title>熊猫部落-历史记录</title>
  <style>
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 1280px;
      height: 720px;
      background: url(images/index-bg.jpg);
      background-color: transparent;
    }

    #title {
      position: absolute;
      font-size: 30px;
      color: #fff;
      left: 79px;
      top: 30px;
    }

    #page {
      position: absolute;
      font-size: 18px;
      color: #fff;
      right: 79px;
      top: 40px;
    }

    #main {
      position: absolute;
      left: 79px;
      top: 90px;
    }

    #main .item {
      position: absolute;
      width: 258px;
      height: 155px;
      background: url(images/loading-placeholder.png) repeat;
    }

    #main .item img {
      display: block;
      width: 100%;
      height: 100%;
    }

    #main-0,
    #main-4,
    #main-8 {
      left: 0;
    }

    #main-1,
    #main-5,
    #main-9 {
      left: 288px;
    }

    #main-2,
    #main-6,
    #main-10 {
      left: 576px;
    }

    #main-3,
    #main-7,
    #main-11 {
      left: 864px;
    }

    #main-0,
    #main-1,
    #main-2,
    #main-3 {
      top: 0;
    }

    #main-4,
    #main-5,
    #main-6,
    #main-7 {
      top: 205px;
    }

    #main-8,
    #main-9,
    #main-10,
    #main-11 {
      top: 410px;
    }

    #main .item-view {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    #main .item-text {
      line-height: 40px;
      height: 40px;
      position: absolute;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #empty {
      font-size: 24px;
      color: #fff;
      position: absolute;
      top: 100px;
      width: 1280px;
      left: -80px;
      text-align: center;
    }
  </style>
</head>

<body onload="init()" onunload="exit()">
  <div id="title">历史记录</div>
  <div id="page"></div>
  <div id="main">
  </div>
</body>
<script src="js/jquery.js"></script>
<script src="config/index.js?v=1"></script>
<script src="api/index.js?v=21"></script>
<script src="js/KeyEvent.js?v=12"></script>
<script src="js/event.js?v=12"></script>
<script src="js/utli.js?v=12"></script>
<script src="js/base.js"></script>
<script>
  var area = [{
    id: 'main-',
    index: 0
  }];
  var totalPage = -1;

  // 页面初始化
  function init() {
    getPreFocus();
    renden();

    getLog({
      programId: '0',
      programName: '历史纪录',
      ctype: '1',
      account: USERID,
      usermac: MAC,
      platform: '1'
    })
    onFocus();
  }

  // 渲染页面
  function renden() {
    var html = '';
    var number = 12;
    data = getHistoryList({
      length: 12
    })
    // totalPage = Math.ceil(data.total / number);
    if (data.data.length > 0) {
      for (var i = 0; i < data.data.length; i++) {
        var _data = data.data[i];
        var pictures = _data.pictures;
        var len = pictures.length;
        var src = '';

        var freeHtml = '';
        if (data.data[i].charge == 0) {
          freeHtml = '<img class="free" src="images/free.png" />'
        }
        if (len > 0) {
          for (var j = 0; j < len; j++) {
            if (pictures[j].ctype == 0) {
              src = pictures[j].url
            }
          }
        }
        html += '<div id="main-' + i + '" class="item  item-focus">' + freeHtml +
          '<img src="' + src + '" alt="">' +
          '<div class="item-view">' +
          '<div class="item-text">' + _data.programName + '</div>' +
          '</div>' +
          '</div>'
      }
    } else {
      html = '<div id="empty">暂无数据</div>'
    }

    $('#main').html(html);
    // $('#page').html('第' + page + '页 / 共' + totalPage + '页');
  }

  // 获取url参数
  function getPreFocus() {
    var url = window.location.href;
    focusArea = parseInt(GY.getURLParameter("AREA", url) != "" ? GY.getURLParameter(
      "AREA", url) : 0);
    area[focusArea].index = parseInt(GY.getURLParameter("INDEX", url) != "" ? GY.getURLParameter(
      "INDEX", url) : 0);
    page = parseInt(GY.getURLParameter("PAGE", url) != "" ? GY.getURLParameter(
      "PAGE", url) : 1);
  }

  // 上键操作
  function keyUp() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index >= 4) {
          freeFocus();
          area[focusArea].index -= 4;
          onFocus()
        } else {
          if (page > 1) {
            page--;
            renden();
          }
        }
        break;
    }
  }

  // 下键操作
  function keyDown() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index <= 7) {
          index += 4;
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index += 4;
            onFocus()
          }
        } else {
          if (page < totalPage) {
            page++;
            renden();
          }
        }
        break;
    }
  }

  // 左键操作
  function keyLeft() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index % 4 != 0) {
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index--;
            onFocus()
          }
        }
        break;
    }
  }

  // 右键操作
  function keyRight() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        index++;
        if (index % 4 != 0) {
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index++;
            onFocus()
          }
        }
        break
    }
  }

  // 回车键操作
  function keyEnter() {
    if (!data.data.length) {
      return
    }
    var index = area[focusArea].index;
    var form = PANDA_PATH + "history.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&PAGE=' + page;
    // GY.addUrl(url, isNeed);
  }

  // 返回键操作
  function keyBack() {
    isNeed = 0;
    GY.goback();
  }

  // 页面退出
  function exit() {

  }

  // 落焦
  function onFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.addClass('focus');
    starMarquee(eFocus)
  }

  // 失焦 
  function freeFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.removeClass('focus');
    stopMarquee(eFocus)
  }
</script>

</html>